<template>
    <div class="swiper">
      <Swiper class="mySwiper" :options="swiperOptions">
                      <SwiperSlide v-for="item in swiperList" :key="item.id">
                        <img :src="item.imgUrl" alt="slide1"  v-if="swiperList.length > 0">
                      </SwiperSlide>
                      <!-- <SwiperSlide>
                        <img src="../image/banner3-1831543774623301632.jpg" alt="slide1">
                      </SwiperSlide>
                      <SwiperSlide>
                        <img src="../image/lQLPJwQ-scFrqrjNAZDNB4Cw2Qnww1CVjTsDuY02aYAOAQ_1920_400-1613080152839815168.png" alt="slide1">
                      </SwiperSlide>
                      <SwiperSlide>
                        <img src="../image/lQLPJxPNXyafSVjNAZDNB4Cwse199X33-z8DtwRx8AAFAA_1920_400-1612724980137590784.png" alt="slide1">
                      </SwiperSlide>
                      <SwiperSlide>
                        <img src="../image/影视后期课程_pc轮播-1319227056260644864.png" alt="slide1">
                      </SwiperSlide> -->
                       <!-- 插入导航按钮插槽 -->
                      <div slot="button-prev" class="swiper-button-prev"></div>
                      <div slot="button-next" class="swiper-button-next"></div>
                      <!-- 插入分页器插槽 -->
                      <div slot="pagination" class="swiper-pagination"></div>
      </Swiper>
    </div>
</template>
  
  <script>
   import {Swiper  , SwiperSlide } from 'vue-awesome-swiper';
   import 'swiper/css/swiper.css';
   import { getLoop } from '@/api/request';
   

  export default {
    name: 'SwiperTest',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperList: [],
        swiperOptions: {
          // 配置选项
          direction: 'horizontal', // 滑动方向
          loop: true, // 循环播放 
          autoplay: { // 自动播放
            delay: 3000, // 自动播放间隔时间
            disableOnInteraction: false, // 用户操作后是否继续自动播放
          },
          pagination: { // 分页器配置
          el: '.swiper-pagination',
          clickable: true,
          },
          navigation: { // 导航配置
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        }
        
      };
    },
    methods: {
        
    },
    created() {
      getLoop(5).then(res => {
            console.log("swiperList----", res, res.data)
            this.swiperList = res.data;
        })
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
    .swiper {
        width: 100%;
        height: 432px;
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        .mySwiper{
            height:400px;
            border-radius: 8px;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .swiper-button-next,
            .swiper-button-prev {
              color: #fff;
            }
            .swiper-pagination-bullet-active {
              background: red;
            }
        }
    }
  </style>
  